<template>
    <span style="padding: 20px;">
        <div class="scheduling-rule-page">
            <span style="width: 800px;display: flex;">
                <router-link style="color: #409EFF;font-size: 14px;margin-right: 20px;transition: all 0.3s;"
                    to="/main/renshi/banciguanli"><i data-v-51d45fda="" class="el-icon-arrow-left"></i>返回</router-link>
            </span>
            <h2 class="page-title">排班规则设置</h2>
            <div class="rule-content">
                <h2>一、排班目的</h2>
                <p>为确保公司业务的正常运转，合理安排员工工作时间，保障员工的休息权益，特制定本排班规则。</p>

                <h2>二、适用范围</h2>
                <p>适用于X部门X岗位全体员工。</p>

                <h2>三、排班类别及工作时长</h2>
                <ul>
                    <li>
                        <strong>一班制（10H）</strong>
                        <p>白班：工作时段为[具体上班时间 1] - [具体下班时间 1]，中间包含[X]小时用餐及休息时间，实际工作时长 10 小时。</p>
                    </li>
                    <li>
                        <strong>二班制（10H + 10H）</strong>
                        <p>白班：工作时段为[具体上班时间 2] - [具体下班时间 2]，含[X]小时用餐及休息时间，工作时长 10 小时。</p>
                        <p>晚班：工作时段为[具体上班时间 3] - [具体下班时间 3]，含[X]小时用餐及休息时间，工作时长 10 小时。</p>
                        <p>白班与晚班之间至少间隔[X]小时，确保员工有足够的休息时间以适应不同班次。</p>
                    </li>
                    <li>
                        <strong>三班制（8H + 8H + 8H）</strong>
                        <p>早班：工作时段为[具体上班时间 4] - [具体下班时间 4]，含[X]小时用餐及休息时间，工作时长 8 小时。</p>
                        <p>中班：工作时段为[具体上班时间 5] - [具体下班时间 5]，含[X]小时用餐及休息时间，工作时长 8 小时。</p>
                        <p>晚班：工作时段为[具体上班时间 6] - [具体下班时间 6]，含[X]小时用餐及休息时间，工作时长 8 小时。</p>
                        <p>相邻班次之间至少间隔[X]小时，保证员工顺利交接并得到充分休息。</p>
                    </li>
                </ul>

                <h2>四、排班管理系统</h2>
                <div>
                    <label for="schedule-type">选择排班类别：</label>
                    <select v-model="selectedScheduleType" @change="generateSchedule">
                        <option value="one-shift">一班制</option>
                        <option value="two-shift">二班制</option>
                        <option value="three-shift">三班制</option>
                    </select>
                </div>
                <div v-if="selectedScheduleType === 'one-shift'">
                    <h3>一班制排班</h3>
                    <p>白班：工作时段为 {{ oneShiftSchedule.whiteShift.start }} - {{ oneShiftSchedule.whiteShift.end }}，实际工作时长
                        10
                        小时。</p>
                </div>
                <div v-if="selectedScheduleType === 'two-shift'">
                    <h3>二班制排班</h3>
                    <p>白班：工作时段为 {{ twoShiftSchedule.whiteShift.start }} - {{ twoShiftSchedule.whiteShift.end }}，工作时长 10
                        小时。
                    </p>
                    <p>晚班：工作时段为 {{ twoShiftSchedule.nightShift.start }} - {{ twoShiftSchedule.nightShift.end }}，工作时长 10
                        小时。
                    </p>
                </div>
                <div v-if="selectedScheduleType === 'three-shift'">
                    <h3>三班制排班</h3>
                    <p>早班：工作时段为 {{ threeShiftSchedule.morningShift.start }} - {{ threeShiftSchedule.morningShift.end
                        }}，工作时长
                        8 小时。</p>
                    <p>中班：工作时段为 {{ threeShiftSchedule.afternoonShift.start }} - {{ threeShiftSchedule.afternoonShift.end
                        }}，工作时长 8 小时。</p>
                    <p>晚班：工作时段为 {{ threeShiftSchedule.nightShift.start }} - {{ threeShiftSchedule.nightShift.end }}，工作时长
                        8
                        小时。</p>
                </div>

                <h2>五、排班周期</h2>
                <p>采用[具体排班周期，如一周、两周、一个月等]为一个排班周期，在每个周期结束后，重新进行排班安排，确保员工班次分配相对公平。</p>

                <h2>六、员工休息安排</h2>
                <ul>
                    <li>在一班制情况下，员工每周至少休息[X]天；二班制员工每周平均休息[X]天，白班和晚班员工休息时间尽量均衡分配；三班制员工每周至少休息[X]天，各班次员工休息机会均等。</li>
                    <li>法定节假日期间，根据国家相关规定，合理安排员工加班与调休，加班员工按照法律规定支付加班费。</li>
                </ul>

                <h2>七、排班流程</h2>
                <ol>
                    <li>由[负责排班的部门或人员]提前[X]天依据业务需求、员工技能、员工过往排班记录等因素进行初步排班。</li>
                    <li>初步排班结果需在部门内部公示[X]天，员工如有特殊情况（如生病、家中有急事等），可在公示期内向[指定负责人]提出调班申请，调班申请需说明理由并附相关证明材料（如有必要），经审核通过后方可调整。
                    </li>
                    <li>公示期结束且无异议后，确定最终排班表，并下发至每位员工，员工需严格按照排班表出勤。</li>
                </ol>

                <h2>八、特殊情况处理</h2>
                <ul>
                    <li>如遇突发业务量激增或紧急任务，需要临时调整班次或加班时，由[部门主管或相关负责人]提前[X]小时通知员工，并说明加班或调班的原因、时长及补偿措施（如加班费、调休等）。</li>
                    <li>员工因个人特殊原因（如突发疾病、意外事故等）无法按时出勤，应立即通知[直属上司或值班负责人]，并在事后提供相关证明材料，按公司请假制度办理请假手续。</li>
                </ul>

                <h2>九、监督与考核</h2>
                <ul>
                    <li>设立排班监督小组，定期检查排班执行情况，确保排班规则的严格执行。如发现违规操作，对相关责任人进行严肃处理。</li>
                    <li>员工必须严格遵守排班安排，无故迟到、早退、旷工等行为将按照公司考勤制度进行处罚。</li>
                </ul>

                <h2>十、附则</h2>
                <ul>
                    <li>本排班规则自发布之日起生效，如有未尽事宜，由[公司管理层或相关部门]负责解释与修订。</li>
                    <li>公司有权根据业务发展、法律法规变化等因素适时调整本排班规则。</li>
                </ul>
                <p>{{ companyName }}<br>{{ enactmentDate }}</p>
            </div>
        </div>
    </span>
</template>

<script>
export default {
    name: 'PaibanShezhi',
    data() {
        return {
            companyName: '深圳市艾美思普科技有限公司',
            enactmentDate: '2024年1月1日',
            selectedScheduleType: 'one-shift',
            oneShiftSchedule: {
                whiteShift: {
                    start: '[具体上班时间 1]',
                    end: '[具体下班时间 1]'
                }
            },
            twoShiftSchedule: {
                whiteShift: {
                    start: '[具体上班时间 2]',
                    end: '[具体下班时间 2]'
                },
                nightShift: {
                    start: '[具体上班时间 3]',
                    end: '[具体下班时间 3]'
                }
            },
            threeShiftSchedule: {
                morningShift: {
                    start: '[具体上班时间 4]',
                    end: '[具体下班时间 4]'
                },
                afternoonShift: {
                    start: '[具体上班时间 5]',
                    end: '[具体下班时间 5]'
                },
                nightShift: {
                    start: '[具体上班时间 6]',
                    end: '[具体下班时间 6]'
                }
            }
        };
    },
    methods: {
        generateSchedule() {
            // 这里可以添加更复杂的排班逻辑，目前只是简单展示
            console.log(`当前选择的排班类别：${this.selectedScheduleType}`);
        }
    }
};
</script>

<style scoped>
.scheduling-rule-page {
    padding: 20px;
    font-family: '宋体', sans-serif;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 800px;
    margin: 0px auto;
}

.page-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: bold;
}

.rule-content h2 {
    color: #555;
    text-align: left;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px;
    /* border-bottom: 1px solid #ddd; */
    padding-bottom: 5px;
}

h3 {
    text-align: left;
    font-size: 1.2em;
}

.rule-content p,
.rule-content ul,
.rule-content ol {
    line-height: 1.6;
    color: #666;
    text-align: justify;
}

.rule-content ul,
.rule-content ol {
    padding-left: 20px;
}

.rule-content li {
    margin-bottom: 10px;
}
</style>